<template>
	<view class="wrap u-p-l-50 u-p-r-50 achievement_wrap">
		<!-- <view class="top u-text-center">已解锁5个地区 共获得12个成就</view> -->
		<view class="top u-text-center"></view>
		
		<view class="content u-p-l-30 u-p-r-30 u-p-t-36">
			<view class="header u-m-b-20">
				<span class="u-font-34">木林成就</span>
				<view class="border"></view>
			</view>
			<view class="u-flex box-wrap" v-if="list.certificateList&&list.certificateList.length>0">
				<view class="box u-m-b-50" v-for="item in list.certificateList" :key="item.pkid">
					<view class="inner" @click="goDetail(item)">
						<u-image border-radius="50%" :src="$u.http.config.baseUrl + (JSON.parse(item.url)[0].url)" width="100%" height="100%" mode=""></u-image>
						<u-image v-if="item.num == 0" class="lock" src="/static/img/loveforest/lock.png" width="40" height="40" mode=""></u-image>
						<view v-if="item.num == 0" style="width:100%;height:100%;position:absolute;top:0;background:#000;opacity:.5;border-radius:50%;"></view>
					</view>
					<view>{{item.name}}</view>
					<u-badge v-if="item.num>0" size="50" type="error" :offset="[0,20]" :count="item.num"></u-badge>
				</view>
			</view>
			<view v-else class="u-text-center u-p-t-60">暂无数据</view>
		</view>
		<view class="bottom">
			<view class="header u-m-b-26">
				<span class="u-font-34">勋章成就</span>
				<view class="border"></view>
			</view>
			<view class="wrap u-flex">
				<view class="item" @click="plantMedal">
					<u-image :style="{opacity: Number(list.plantMedalNum)>0? '1': '.7'}" src="/static/img/loveforest/medal.png" width="126" height="126" mode=""></u-image>
					<u-image :style="{opacity: Number(list.plantMedalNum)>0? '1': '.7'}" src="/static/img/loveforest/medal1.png" width="126" height="126" mode=""></u-image>
				</view>
				<view class="item" @click="guardMedal">
					<u-image :style="{opacity: Number(list.guardMedalNum)>0? '1': '.7'}" src="/static/img/loveforest/medal3.png" width="126" height="126" mode=""></u-image>
					<u-image :style="{opacity: Number(list.guardMedalNum)>0? '1': '.7'}" src="/static/img/loveforest/medal4.png" width="126" height="126" mode=""></u-image>
				</view>
			</view>
		</view>
		<view v-if="result.length>0">
			<certficate :show="show" :result="result" @close="hide"/>
		</view>
		
	</view>
</template>

<script>
	import certficate from "../../components/certificate.vue"
	export default {
		components:{ certficate },
		data() {
			return {
				list: [],
				result: [],
				show:false
			}
		},
		onShow() {
			this.init()
		},
		methods: {
			init () {
				this.$u.api.forestMedalList().then(res => {
					this.list = res
				}).catch(res => {
					this.$u.toast(res.msg)
				})
			},
			hide () {
				this.show = false
			},
			plantMedal () {
				if(this.list.plantMedalNum<1){
					return;
				}
				this.$u.api.plantMedal().then(res => {
					this.show = true
					res.type = 3
					this.result = [res]
				}).catch(res => {
					this.$u.toast(res.msg)
				})
			},
			guardMedal () {
				if(this.list.guardMedalNum<1){
					return;
				}
				this.$u.api.guardMedal().then(res => {
					this.show = true
					res.type = 4
					this.result = [res]
				}).catch(res => {
					this.$u.toast(res.msg)
				})
			},
			goDetail (item) {
				if(item.num === 0) {
					return;
				}
				if(item.type === "guard_cert") {
					this.$u.api.medalGuard({id:item.pkid}).then(res => {
						this.show = true
						res.map(value => {
							value.type = 2
						})
						this.result = res
					}).catch(res => {
						this.$u.toast(res.msg)
					})
				}else{
					this.$u.api.medalPlant({id:item.pkid}).then(res => {
						this.show = true
						res.map(value => {
							value.type = 1
						})
						this.result = res
					}).catch(res => {
						this.$u.toast(res.msg)
					})
				}
			},
			toDetail () {
				this.$u.route('pages/loveforest/personal_garden/achievement/achievement_detail')
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #344333;
		
	}
	.achievement_wrap {
		padding-bottom: 30px;
	}
	.top {
		color:#969e96;
		padding: 20px 0;
	}
	.header {
		width: 136rpx;
		height: 48rpx;
		margin: 0 auto;
		position:relative;
		span{
			position:relative;
			z-index: 100;
			font-weight: bold;
		}
		.border {
			border-bottom: 10px solid #dae8fd;
			position: absolute;
			bottom:0;
			left:0;
			width:100%;
		}
	}
	.content {
		background: #fff;
		min-height: 300px;
		border-radius: 6px;
		padding-bottom: 20px;
		.box-wrap {
			flex-wrap: wrap;
			justify-content: space-between;
			// height:230px;
			// overflow-y:auto;
		}

		.box {
			width: 30%;
			height: 120rpx;
			display: inline-block;
			margin-top: 1rem;
			text-align: center;
			position:relative;
			.inner {
				width:120rpx;
				height:100%;
				margin:0 auto;
				// border-radius: 50%;
				position: relative;
				overflow:hidden;
				.lock {
					position: absolute;
					top:50%;
					left:50%;
					transform: translate(-50%,-50%);
					z-index:100
				}
			}

		}

		.box-wrap:after {
			content: "";
			width: 30%;
			height: 0px;
			visibility: hidden;
		}
	}
	.bottom {
		background: #fff;
		margin-top:30px;
		padding: 20px 30px 20px 30px;
		flex-wrap: wrap;
		overflow:auto;
		border-radius: 6px;
		.wrap {
		}
		.item {
			width: 30%;
			margin-right: 30px;
			// min-width:30%;
			// max-width:30%;
			// padding-right:20px;
		}
	}
	/deep/ .certificate_pop {
		.u-mode-center-box {
			background: transparent!important;
			
		}
		.iconClose{
			top: 60px!important;
		}
	}
	
</style>
